<template>
	<view>
		<u-form class='container' :model="form" ref="uForm" label-width='200rpx'>
			<u-form-item label="直播标题" required prop='name'>
				<u-input v-model="form.name" input-align='right' placeholder='请输入标题' />
			</u-form-item>

			<u-form-item label="直播时间" required prop='startTime'>
				<picker mode="time" style="width: 100%" start="00:00" end="23:59" @change="bindStartTimeChange">
					<view class="pickerBox">
						<u-input v-model="form.startTime" input-align='right' placeholder='请选择开始时间' />
						<view class="maskBox"></view>
					</view>
				</picker>
				~
				<picker mode="time" :value="form.endTime" style="width: 100%" start="00:00" end="23:59"
					@change="bindEndTimeChange">
					<view class="pickerBox">

						<u-input v-model="form.endTime" placeholder='请选择结束时间' />
						<view class="maskBox"></view>
					</view>
				</picker>

			</u-form-item>
			<u-form-item label="直播类型" prop='type'>
				<u-radio-group v-model="form.type" class='radioGroup'>
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="直播栏目" required prop='colmunName'>
        <view @click="columnShow = true" class="pickerBox">
          <u-input v-model="form.colmunName" disabled input-align='right' placeholder='请选择栏目' />
          <view class="maskBox"></view>
        </view>
			</u-form-item>
			<u-form-item label="直播描述" required prop='roomDetail' label-position='top'>
				<u-input v-model="form.roomDetail" placeholder='请输入描述' type='textarea' :height="100" :auto-height="true" />
			</u-form-item>
			<u-form-item>
				<u-checkbox v-model="readed">
					我已阅读并遵守<text class="markRed" @click="ruleModel = true">《运动健康平台直播协议》</text>
				</u-checkbox>
			</u-form-item>
		</u-form>
		<view class="btnBox">
			<u-button @click='submit' class='btn1' type="error" shape="circle">提交申请</u-button>
		</view>
		<u-modal
      v-model="columnShow"
      :title="选择栏目"
      confirm-text="关闭"
      :show-confirm-button="false"
      show-cancel-button
      mask-close-able
      @confirm="confirmColumn"
      >
			<view class="slot-content">
				<u-checkbox-group v-model="colmuns" @change="columnChange">
          <u-checkbox v-for="(item, index) in columnList" :key="index" v-model="item.value" :name="item.id">{{item.name}}</u-checkbox>
        </u-checkbox-group>
			</view>
		</u-modal>
		<!-- 规则弹窗 -->
		<u-modal
		v-model="ruleModel"
	  :title="ruleInfo.title"
		cancelText="确认"
		:show-confirm-button="false"
		show-cancel-button
		mask-close-able
		>
		
		<view class="ruleContent" v-html="ruleInfo.content">
			<rich-text  :nodes="ruleInfo.content"></rich-text>
		</view>
		</u-modal>
	</view>
</template>

<script>
	import storage from "@/utils/storage.js";
	import api from "@/config/api.js";
	import {API} from '@/config/myApi.js'
	export default {
		data() {
			return {
				ruleInfo: {
					
				},
				ruleModel:false,
				readed: false,
				form: {
					name: '', // 直播标题
					type: '', // 直播类型
					courseCategory: '', // 关联栏目
          colmunName: '',//选中栏目名称
					roomDetail: '',//直播描述
					startTime: '', // 直播开始时间
					endTime: '',// 直播结束时间
				},
				rules: {
					name: [{
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					}],
					type: [{
						required: true,
						message: '请输入类型',
						trigger: ['blur', 'change']
					}],
					colmunName: [{
						required: true,
						message: '请输入栏目',
						trigger: ['blur', 'change']
					}],
					roomDetail: [{
						required: true,
						message: '请输入描述',
						trigger: ['blur', 'change']
					}],
				},
        columnShow: false, // 选择栏目
				columnList: [],//关联栏目
        colmuns: [],//选中栏目
				radioList: [
          { name: '知识',  value: "KNOWLEDGE" },
					{ name: '商品',  value: "GOODS" }
				],
				index: 0,
        action: 'add',
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
    onLoad(option) {
      this.action = option.action;
      let form = JSON.parse(option.params);

      console.log(form,'传值')
    },
    mounted() {
      this.getColumnType();
	  this.getLiveRule()
    },
		methods: {
			getLiveRule() {
				API.getLiveRule()
				.then(res => {
					console.log(res)
					if(res.code === 200) {
						this.ruleInfo = res.result
					}
				})
			},
      // 选中直播栏目
			bindPickerChange(e) {
				this.form.column = this.courseCategory[e.detail.value]
				this.index = this.courseCategory[e.detail.value]
			},
      // 选中开始时间
			bindStartTimeChange(e) {
				this.form.startTime = e.detail.value
			},
      // 选中结束时间
			bindEndTimeChange(e) {
				this.form.endTime = e.detail.value
			},
      // 选择栏目
      columnChange(e) {
        let list = [];
        this.columnList.map(i=>{
          e.map(a=>{
            if (a == i.id) list.push(i.name);
          })
        })
        this.form.courseCategory = e.join(',');
        this.form.colmunName = list.join(',');
      },
      // 保存栏目
      confirmColumn() {
        this.form.courseCategory = this.colmunName;
      },
      // 获取栏目
      getColumnType() {
        uni.request({
          url: api.manager + "/manager/course/category/getCategory",
          header: {
            'accessToken': storage.getAccessToken(),
            'refreshToken': storage.getRefreshToken()
          },
          success: ({ data }) => {
            if (data.success) {
              let list = [];
              data.result.map(x=>{
                list = list.concat(x.leafList);
              })
              this.columnList = list;
            }
          }
        });
      },
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
            console.log(this.form)
						if (!this.form.startTime || !this.form.endTime) {
							uni.showToast({
								message: '请选择时间'
							})
              return;
						}
            let params = Object.assign({}, this.form);
            delete params.colmunName;
            uni.request({
              url: api.expert + "/expert/broadcast/studio",
              method: "POST",
              data: params,
              header: {
                'content-type': 'application/json',
                'accessToken': storage.getAccessToken(),
                'refreshToken': storage.getRefreshToken()
              },
              success: ({ data }) => {
                if (data.success) {
                  uni.navigateBack();
                }
              }
            });
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.btnBox {
		position: fixed;
		background-color: #f5f5f5;
		width: 100%;
		bottom: 10rpx;
		padding: 0 30rpx;
		left: 0;

		.btn1 {
			height: 90rpx
		}
	}

.markRed {
  color: red;
}

.radioGroup {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.pickerBox {
position: relative;
width: 100%;

  .maskBox {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 2;
  }
}

.timeBox {
  text-align: right;
  width: 100%;
}
.slot-content {
  padding: 20px;
}
.ruleContent {
	padding: 0 10rpx ;
	min-height: 10vh;
	max-height: 50vh;
	overflow: auto;
}
</style>
